import { defineComponent } from "vue";
import "./index.scss";
const Progress = defineComponent({
	props: {
		/**百分比 0 ~ 100 */
		percentage: {
			type: Number,
			required: true
		},
		/**背景色 */
		bkgColor: {
			type: String,
			default: "#3B467D"
		},
		/**线条颜色 */
		color: {
			type: String,
			default: "linear-gradient(90.00deg, #f9ba0b 0%, #fd5e02 100%)"
		},
		/**进度条高度 */
		height: {
			type: String,
			default: "5px"
		}
	},
	setup(props) {
		return () => {
			return (
				<div class={"progress-module"} style={{ backgroundColor: props.bkgColor, height: props.height }}>
					<div
						class={"progress-module-c"}
						style={{ background: props.color, width: (props.percentage > 100 ? 100 : props.percentage) + "%" }}
					></div>
				</div>
			);
		};
	}
});
export default Progress;
